<template>
  <div>
    <!-- 菜单管理 -->
    <div class="all">
      <!-- 搜索框 -->
      <div class="search_box">
        <div>
          <div class="search_title">菜单id</div>
          <div>
            <el-input class="inputs" placeholder="请输入标题" />
          </div>
        </div>
        <div class="search_righ">
          <div class="search_title">菜单名称</div>
          <div>
            <el-input class="inputs" placeholder="请输入标题" />
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="button_box">
        <el-button type="primary" class="butten">新增</el-button>
        <el-button type="danger" class="butten">批量删除</el-button>
      </div>
      <div class="table_box">
        <el-table :data="paginatedData">
          <el-table-column type="selection" width="55" />
          <el-table-column label="菜单id" width="120" align="center">
            <template #default="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column property="pid" label="上级id" width="200" align="center" show-overflow-tooltip />
          <el-table-column property="title" label="菜单名称" align="center" show-overflow-tooltip />
          <el-table-column property="path" label="路径" align="center" show-overflow-tooltip />
          <el-table-column property="icon" label="图标" align="center">
            <template #default="scope">
              <Edit style="width: 28px;" />
            </template>
          </el-table-column>
          <el-table-column property="createtime" label="创建时间" align="center" show-overflow-tooltip />
          <el-table-column property="address" label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" text>编辑</el-button>
              <el-button type="danger" text>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import {  onMounted, ref } from "vue";
import { menuGet } from "/@/api/public/menu/index";
import "/src/css/business.css";


// 添加Font Awesome图标库

const filteredData = ref([]); // 用于存储过滤后的数据
const paginatedData = ref([]); // 用于存储分页后的数据
const data = ref(null);
// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

onMounted(() => {
  menuGet().then((res) => {
    console.log(res);
    const transformedData = res.data;
    data.value = transformedData;
    filteredData.value = transformedData; // 初始化过滤后的数据
    total.value = transformedData.length;
    updatePaginatedData();
    console.log(data.value);
  });
});

function handleCurrentChange(newCurrentPage: number) {
  currentPage.value = newCurrentPage;
  updatePaginatedData();
}

// 更新分页后的数据
function updatePaginatedData() {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedData.value = filteredData.value.slice(start, end);
}

// 处理分页事件
function handleSizeChange(newPageSize: number) {
  pageSize.value = newPageSize;
  currentPage.value = 1; // 重置当前页码
  updatePaginatedData();
}
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.inputs {
  width: 240px;
  height: 30px
}
</style>
<style lang="scss">
.el-table .el-table__cell.is-center {
  position: unset !important;
}
</style>